<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <el-button type="primary" :disabled="selection.length==0" @click="allSend" v-auth="'orderCreate.allSend'">批量发货</el-button>
                <div class="search-input">采购单号</div>
                <el-input v-model="search.order_sn" placeholder="请输入采购单号" clearable @change="handleKeyDown"/>
                <div class="search-input">物料类别</div>
                <el-select v-model="search.category_id" placeholder="请选择" @change="change" clearable>
                    <el-option label="毛料" :value="1"></el-option>
                    <el-option label="辅料" :value="2"></el-option>
                    <el-option label="其他" :value="3"></el-option>
                </el-select>
                <div class="search-input">色号</div>
                <el-input v-model="search.color_number" placeholder="请输入色号" clearable @change="handleKeyDown"/>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="采购单号" prop="order_sn" align="center" width="100"></el-table-column>
                <el-table-column fixed label="物料基础信息" prop="sample_clothing" align="center" width="310">
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" v-if="scope.row.materialSpec" :src="scope.row.materialSpec.image" :preview-src-list="scope.row.materialSpec.image_arr" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div style="width:150px" v-if="scope.row.materialSpec">物料SKC：{{scope.row.materialSpec.skc}}</div>
                                <div v-if="scope.row.materialSpec">物料名称：{{scope.row.material_name}}</div>
                                <div v-if="scope.row.materialSpec">色号:{{scope.row.materialSpec.color_number}}</div>
                                <div v-if="scope.row.materialSpec">颜色:{{scope.row.materialSpec.colour}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单位成分" prop="category_name" align="center">
                    <template #default="scope">
                        <div>单位:{{scope.row.unit_name }}</div>
                        <div v-if="scope.row.materialSpec">成分:{{scope.row.materialSpec.material.component_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="工厂信息" prop="referred_as" align="center"></el-table-column>
                <el-table-column label="采购信息" prop="num" align="center">
                    <template #default="scope">
                        <div>类型:{{scope.row.source_name}}</div>
                        <div>采购量:{{scope.row.num}}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="发货量" prop="send_num" align="center"></el-table-column>
                <el-table-column label="单价" prop="price" align="center"></el-table-column>
                <el-table-column label="总价" prop="amount" align="center"></el-table-column> -->
                <el-table-column label="物料需求来源" prop="material_name" align="center">
                    <el-table-column label="工厂货号" prop="factory_number" align="center"></el-table-column>
                    <el-table-column label="批次号" prop="batch_number" align="center"></el-table-column>
                    <el-table-column label="单据来源" prop="order_no" align="center">
                        <template #default="scope">
                                {{scope.row.order_no}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="table_send(scope.row, scope.$index)" v-auth="'orderCreate.send'">发货</el-button>
                            <!-- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm> -->
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-dialog>
    <all-save v-if="dialog.all" ref="allDialog" @success="handleSuccess" @closed="dialog.all = false" draggable></all-save>
</template>

<script>
import AllSave from './allSave.vue'
import saveDialog from './save'

export default {
	name: 'user',
	components: {
		saveDialog,AllSave
	},
	data() {
		return {
			dialog: {
				save: false,
				exa: false,
                ware:false,
			},
			group: [],
			apiObj: this.$API.material.getshopCar.listsOfSupplier,
            query:{
                work_status:1
            },
			selection: [],
			search: {
				order_sn: null,
				category_id: null,
				color_number: null,
				component: null,
			},
            apply:[],
		}
	},
	mounted() {
        this.getApply()
	},
	methods: {
        // 发货
        async table_send(row){
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row);
			})
        },
        selectionChange(selection) {
			this.selection = selection;
		},
        allSend(){
            this.dialog.all = true
			this.$nextTick(() => {
				this.$refs.allDialog.open('edit').setData(this.selection)
			})
        },
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        async getApply(){
            var res = await this.$API.all.Apply.get();
            this.apply = res.data;
            // this.apply = []
            // if(e==1){
            //     var res = await this.$API.all.Apply.get({type:3});
            //     this.apply = res.data;
            // }else if(e==2){
            //     var data = await this.$API.all.Apply.get({type:4});
            //     this.apply = data.data;
            // }else if(e==3){
            //     var a = await this.$API.all.Apply.get({type:5});
            //     this.apply = a.data;
            // }
        },
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
